<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>自定义指令</h2>
      <input v-focus />
      <div v-abc:x.y.z="100">div</div>
      <div v-demo:style.red="50">hello</div>
      <div v-demo:style.green="100">hello2</div>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      // const obj = {
      //   name: "laotian",
      //   age: 55,
      // };
      // console.log(obj);
      // const arr = Object.keys(obj);
      // console.log(arr);
      // arr.forEach(item => {
      //   obj[item]
      // })

      const app = Vue.createApp({
        data() {
          return {};
        },
        // 局部创建自定义指令
        directives: {
          // 在模板中启用 v-focus
          focus: {
            mounted: (el) => el.focus(),
          },

          abc: {
            // 在绑定元素的 attribute 前
            // 或事件监听器应用前调用
            created(el, binding, vnode, prevVnode) {
              // 下面会介绍各个参数的细节
            },
            // 在元素被插入到 DOM 前调用
            beforeMount(el, binding, vnode, prevVnode) {},
            // 在绑定元素的父组件
            // 及他自己的所有子节点都挂载完成后调用
            mounted(el, binding, vnode, prevVnode) {
              console.log("el", el);
              console.log("binding", binding);
              // el表示使用这个指令的dom节点
              /*
                binding: {
                  arg: 参数
                  dir: 表示用了哪些生命周期
                  modifiers: {y:true,z:true} 表示用了哪些修饰符
                  value: 等号后面的值
                }
              */
            },
            // 绑定元素的父组件更新前调用
            beforeUpdate(el, binding, vnode, prevVnode) {},
            // 在绑定元素的父组件
            // 及他自己的所有子节点都更新后调用
            updated(el, binding, vnode, prevVnode) {},
            // 绑定元素的父组件卸载前调用
            beforeUnmount(el, binding, vnode, prevVnode) {},
            // 绑定元素的父组件卸载后调用
            unmounted(el, binding, vnode, prevVnode) {},
          },
          demo: {
            mounted(el, binding) {
              const { modifiers, value } = binding;
              // console.log(binding);
              // el.style.color = "red";
              // el.style.fontSize = "50px"
              el[binding.arg].color = Object.keys(modifiers)[0];
              el[binding.arg].fontSize = value + "px";
            },
          },
        },
      });

      // 全局创建指令
      // app.directive("focus", {
      //   mounted: (el) => el.focus(),
      // });

      app.mount("#app");
    </script>
  </body>
</html>
